<template>
	<view class="">
		<view class="" style="height: 22rpx;">
			
		</view>
		<view class="" style="display: flex;padding: 22rpx 22rpx 22rpx 32rpx;background: #fff;">
			<view class="" style="font-size: 0;margin-right: 20rpx;">
				<image style="width: 128rpx;height: 128rpx;" :src="ImgUrl+obj.items[0].goods.img[0]" mode=""></image>
			</view>
			<view class="" style="height: 128rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="" style="font-size: 24rpx;color: #262626;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
					{{obj.items[0].goods.name}}
				</view>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="display: flex;align-items: center;">
						<view class="" v-if="obj.items[0].sku" v-for="(item,index) in obj.items[0].sku.difference_text" style="padding: 3rpx 7rpx;margin-right: 7rpx;border: 2rpx solid #262626;border-radius: 4rpx;font-size: 20rpx;color: #262626;">
							{{item}}
						</view>
					</view>
					<view class="" style="font-size: 22rpx;color: 000;">
						x{{obj.items[0].num}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 22rpx;">
			
		</view>
		<view class="" style="height: 104rpx;background: #fff;display: flex;align-items: center;justify-content: space-between;font-size: 26rpx;">
			<view class="" style="color: #262626;margin-left: 32rpx;">
				货物状态
			</view>
			<view @click="show1=true" class="" style="display: flex;align-items: center;">
				<view class="" style="color: #626262;">
					{{status}}
				</view>
				<view class="" style="font-size: 0;margin-right: 32rpx;margin-left: 12rpx;">
					<image style="width: 22rpx;height: 22rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/orderDetail3.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 3rpx;">
			
		</view>
		<view class="" style="height: 104rpx;background: #fff;display: flex;align-items: center;justify-content: space-between;font-size: 26rpx;">
			<view class="" style="color: #262626;margin-left: 32rpx;">
				退货原因
			</view>
			<view @click="show2=true" class="" style="display: flex;align-items: center;">
				<view class="" style="color: #626262;">
					{{status2}}
				</view>
				<view class="" style="font-size: 0;margin-right: 32rpx;margin-left: 12rpx;">
					<image style="width: 22rpx;height: 22rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/orderDetail3.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 22rpx;">
			
		</view>
		<view class="" style="height: 104rpx;background: #fff;display: flex;align-items: center;justify-content: space-between;font-size: 26rpx;">
			<view class="" style="color: #262626;margin-left: 32rpx;">
				货物价值
			</view>
			<view class="" style="font-size: 26rpx;color: var(--df-5046, #DF5046);margin-right: 32rpx;">
				<template v-if="type==0">
					{{obj.score}}积分
				</template>
				<template v-if="type==0&&obj.amount">
					+
				</template>
				<template v-if="obj.amount">
					{{obj.amount}}元
				</template>
			</view>
		</view>
		<view class="" style="height: 22rpx;">
			
		</view>
		<view class="" style="height: 104rpx;background: #fff;display: flex;font-size: 26rpx;align-items: center;">
			<view class="" style="display: flex;align-items: flex-end;">
				<view class="" style="color: #262626;margin-left: 32rpx;">
					补充描述
				</view>
				<view class="" style="color: var(--, #626262);font-size: 22rpx;margin-left: 12rpx;">
					选填
				</view>
			</view>
		</view>
		<view class="" style="background: #fff;padding-left: 32rpx;padding-bottom:36rpx;">
			<input type="text" style="font-size: 26rpx;" v-model="desc" placeholder="请补充描述">
		</view>
		<view class="" style="height: 3rpx;">
			
		</view>
		<view class="" style="height: 104rpx;background: #fff;display: flex;font-size: 26rpx;align-items: center;">
			<view class="" style="display: flex;align-items: flex-end;">
				<view class="" style="color: #262626;margin-left: 32rpx;">
					上传凭证
				</view>
				<view class="" style="color: var(--, #626262);font-size: 22rpx;margin-left: 12rpx;">
					选填
				</view>
			</view>
		</view>
		<view v-if="!img" @click="getImage" class="" style="background: #fff;padding-left: 32rpx;padding-bottom: 32rpx;position: relative;">
			<view class="" style="font-size: 0;width: 152rpx;height: 152rpx;">
				<image style="width: 152rpx;height: 152rpx;" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/applyOut1.png" mode=""></image>
			</view>
			<view class="" style="position: absolute;top: 0;left: 32rpx;width: 152rpx;height: 152rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<view class="" style="color: #a6a6a6;">
					+
				</view>
				<view class="" style="font-size: 26rpx;color: #a6a6a6;">
					上传凭证
				</view>
			</view>
		</view>
		<view v-else class="" style="background: #fff;padding-left: 32rpx;padding-bottom: 32rpx;position: relative;">
			<view class="" style="font-size: 0;width: 152rpx;height: 152rpx;">
				<image style="width: 152rpx;height: 152rpx;" :src="img" mode=""></image>
			</view>
		</view>
		<!-- 占位置 -->
		<view class="" style="height: 150rpx;">
			
		</view>
		<view @click="submit" class="btn">
			提交
		</view>
		<!-- <u-select v-model="show1" mode="single-column" :list="list1" @confirm="confirm1"></u-select> -->
		<!-- <u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select> -->
		 <u-picker :immediateChange="true" @cancel="show1=false" :show="show1" @confirm="confirm1" :columns="list1" keyName="label"></u-picker>
		  <u-picker :immediateChange="true" @cancel="show2=false" :show="show2" @confirm="confirm2" :columns="list2" keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		scorerefund,
		goodsrefund
	} from '@/api/common.js'
	import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
	export default {
		data(){
			return {
				desc:'',
				img:'',
				img2:'',
				obj:'',
				type:0,//0积分商城订单 1商城订单
				status:'请选择',
				statusId:'',
				status2:'请选择',
				status2Id:'',
				show1:false,
				show2:false,
				list1:[[{
						value: '0',
						label: '未收到货'
					},
					{
						value: '1',
						label: '已收到货'
					}]],
				list2:[[{
						value: '0',
						label: '不喜欢'
					},
					{
						value: '1',
						label: '空包裹'
					},{
						value: '2',
						label: '一直未送达'
					},{
						value: '3',
						label: '颜色/尺码不符'
					},{
						value: '4',
						label: '质量问题'
					},{
						value: '5',
						label: '少件漏发'
					},{
						value: '6',
						label: '假冒品牌'
					}]],
			}
		},
		onLoad(options) {
			let obj = JSON.parse(decodeURIComponent(options.obj));
			this.obj = obj;
			this.type = obj.typess;
		},
		computed: {
			ImgUrl() {
				return this.$store.state.ImgUrl
			}
		},
		methods:{
			confirm1(e){
				this.status = e.value[0].label;
				this.statusId = e.value[0].value;
				this.show1 = false;
			},
			confirm2(e){
				this.status2 = e.value[0].label;
				this.status2Id = e.value[0].value;
				this.show2 = false;
			},
			getImage(){
				let that = this;
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					count: 1,
					success: (res)=>{
						let path = res.tempFilePaths[0];
						uploadImage(path,'','wechat/', res => {
							// that.avatarUrl = res.imgUrl;
							that.img2 = res.imgName;
							that.img = res.imgUrl;
							console.log(res,'123');
						});
						// for(let i=0;i<res.tempFilePaths.length;i++){
						// 	uni.getImageInfo({
						// 		src: res.tempFilePaths[i],
						// 		success: (image)=>{
						// 			console.log(image.width);
						// 			console.log(image.height);
						// 			// let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
						// 			this.sendMsg(res,'img');
						// 		}
						// 	});
						// }
					}
				});
			},
			submit(){
				if(this.status=="请选择"){
					uni.showToast({
						title:'请选择货物状态',
						icon:'none'
					})
					return;
				}
				if(this.status2=="请选择"){
					uni.showToast({
						title:'请选择退货原因',
						icon:'none'
					})
					return;
				}
				if(this.type==0){
					scorerefund({
						id:this.obj.id,
						express_type:this.statusId,//货物状态
						reason:this.status2Id,//退货理由
						images:this.img2,
						refund_content:this.desc
					}).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},800)
					})
				}else{
					goodsrefund({
						id:this.obj.id,
						express_type:this.statusId,//货物状态
						reason:this.status2Id,//退货理由
						images:this.img2,
						refund_content:this.desc
					}).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},800)
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	.btn {
		width: 686rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background:#0165FB;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		bottom: 70rpx;
		left: 32rpx;
	}
</style>